<template>
	<view class="contentW">
		<view class="hei20"></view>
		<view class="dataListWrap">
			<view class="dataListTop">
				<view class="data">
					<view class="dataL"></view>
					<view class="dataR">
						<view class="dataRT">煤气总产量</view>
						<view class="dataRB">111111.8立方米</view>
					</view>
				</view>
				<view class="data">
					<view class="dataL"></view>
					<view class="dataR">
						<view class="dataRT">本周产量</view>
						<view class="dataRB">1896立方米</view>
					</view>
				</view>
				<view class="data dataRLast">
					<view class="dataL"></view>
					<view class="dataR">
						<view class="dataRT">本月产量</view>
						<view class="dataRB">169立方米</view>
					</view>
				</view>
			</view>
			<view class="dataListTop">
				<view class="data">
					<view class="dataL"></view>
					<view class="dataR">
						<view class="dataRT">本月耗电量</view>
						<view class="dataRB">1111 KWH</view>
					</view>
				</view>
				<view class="data">
					<view class="dataL"></view>
					<view class="dataR">
						<view class="dataRT">本月燃煤量</view>
						<view class="dataRB">189吨</view>
					</view>
				</view>
				<view class="data dataRLast">
					<view class="dataL"></view>
					<view class="dataR">
						<view class="dataRT">本月告警数</view>
						<view class="dataRB">23次</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="dataList">
			<view class="chart">
				<view class="chartT">
					<view class="chartTL">
						<qiun-data-charts
							type="arcbar"
							:opts="opts1"
							:chartData="chartData1"
						/>
					</view>
					<view class="chartTR"><view>170</view><view class="chartTRSpan">台</view></view>
				</view>
				<view class="chartB">正常设备数量</view>
			</view>
			<view class="chart">
				<view class="chartT">
					<view class="chartTL">
						<qiun-data-charts
							type="arcbar"
							:opts="opts2"
							:chartData="chartData2"
						/>
					</view>
					<view class="chartTR"><view>106</view><view class="chartTRSpan">台</view></view>
				</view>
				<view class="chartB">停机设备数量</view>
			</view>
		</view>
		<view class="dataList">
			<view class="chart">
				<view class="chartT">
					<view class="chartTL">
						<qiun-data-charts
							type="arcbar"
							:opts="opts3"
							:chartData="chartData3"
						/>
					</view>
					<view class="chartTR"><view>39</view><view class="chartTRSpan">台</view></view>
				</view>
				<view class="chartB">低效运行设备数量</view>
			</view>
			<view class="chart">
				<view class="chartT">
					<view class="chartTL">
						<qiun-data-charts
							type="arcbar"
							:opts="opts4"
							:chartData="chartData4"
						/>
					</view>
					<view class="chartTR"><view>50</view><view class="chartTRSpan">台</view></view>
				</view>
				<view class="chartB">高效运行设备数量</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import { getOrderList } from '@/common/api/index.js'
	export default {
		data() {
			return {
				chartData1: {},
				chartData2: {},
				chartData3: {},
				chartData4: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: { },
				opts2: { },
				opts3: { },
				opts4: { },
				listData:[],
				pageData: {
					pageNum: 1,
					pageSize: 10
				},
			}
		},
		onLoad() {

		},
		onReady() {
		    this.getServerData();
			this.listData = [];
			this.getData();
		  },
		  methods: {
		    getServerData() {
		      //模拟从服务器获取数据时的延时
		      setTimeout(() => {
		        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		        let res = {
		            series: [
		              {
		                name: "占比",
		                color: "#73C0DE",
		                data: 0.8
		              }
		            ]
		          };
		        this.chartData1 = JSON.parse(JSON.stringify(res));
				this.opts1 = {
					title: {
					  name: "80%",
					  fontSize: 20,
					  color: "#73C0DE"
					},
					subtitle: {
					  name: "占比",
					  fontSize: 12,
					  color: "#666666"
					}
				}
				this.chartData2 = {
		            series: [
						{
							name: "占比",
							color: "#1890FF",
							data: 0.2
						}
		            ]
		        }
				this.opts2 = {
					title: {
					  name: "20%",
					  fontSize: 20,
					  color: "#1890FF"
					},
					subtitle: {
					  name: "占比",
					  fontSize: 12,
					  color: "#666666"
					}
				}
				this.chartData3 = {
				    series: [
						{
							name: "占比",
							color: "#EE6666",
							data: 0.15
						}
				    ]
				}
				this.opts3 = {
					title: {
					  name: "15%",
					  fontSize: 20,
					  color: "#EE6666"
					},
					subtitle: {
					  name: "占比",
					  fontSize: 12,
					  color: "#666666"
					}
				}
				this.chartData4 = {
				    series: [
						{
							name: "占比",
							color: "#91CB74",
							data: 0.85
						}
				    ]
				}
				
				
				
				this.opts4 = {
					title: {
					  name: "85%",
					  fontSize: 20,
					  color: "#91CB74",
					  // color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"]
					},
					subtitle: {
					  name: "占比",
					  fontSize: 12,
					  color: "#666666"
					}
				}
		      }, 500);
		    },
			getData(){
				getOrderList(this.pageData).then(data => {
					if (data.code === 200) {
						this.listData = this.listData.concat(data.rows);
						console.log('qq',this.listData)
					}
				})
			}
		  }
	}
</script>

<style>
	.contentW{
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
	}
	.dataListWrap{
		margin: 0 20rpx;
		width: 710rpx;
		height: auto;
		background-color: #fff;
		padding: 0 0 10rpx 0;
		border-radius: 20rpx;
	}
	.dataList{
		display: flex;
		justify-content: space-between;
		margin: 20rpx 20rpx;
	}
	.dataListTop{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
	}
	.data{
		width: 250rpx;
		display: flex;
		justify-content: flex-start;
	}
	.dataL{
		width: 8rpx;
		height: 36rpx;
		background-color: #4aadee;
		margin: 8rpx 10rpx 0 7rpx;
		border-radius: 4rpx;
	}
	.dataR{
		flex: 1;
		font-size: 28rpx;
		line-height: 48rpx;
		font-weight: bold;
	}
	.dataRLast{
		width: 179rpx;
	}
	.dataRT{
		color: #555;
	}
	.dataRB{
		color: #EE6666;
	}
	.chart{
		width: 345rpx;
		height: 250rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.chartT{
		width: 345rpx;
		height: 200rpx;
		display: flex;
	}
	.chartTL{
		width: 200rpx;
		height: 200rpx;
		margin-left: 15rpx;
	}
	.chartTR{
		width: 125rpx;
		height: 200rpx;
		font-size: 34rpx;
		line-height: 200rpx;
		padding-right: 30rpx;
		color: #333;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}
	.chartTRSpan{
		font-size: 14rpx;
		line-height: 190rpx;
	}
	.chartB{
		width: 100%;
		height: 50rpx;
		font-size: 18rpx;
		padding-left: 20rpx;
		color: #555;
	}
</style>
